<template>
    <div class="detail-container">
        <i-panel>
            <div class="info-container">
                <i-row>
                    <i-col span='8'>
                        <div class="student-avartar">
                            <img src="../../../static/images/avatar.png" alt="">
                        </div>
                    </i-col>
                    <i-col span='16'>
                        <div class="content">
                            <i-row>
                                <i-col span='8'>
                                    <div class="name">
                                        学员姓名
                                    </div>
                                </i-col>
                                
                                <i-col span='16'>
                                    <div class="joinDate">
                                        18.2.23 
                                        <div class="del">
                                            【报名时间】
                                        </div>
                                    </div>
                                </i-col>  
                            </i-row>
                            <i-row>
                                <i-col span='6'>学习进度:</i-col>
                                <i-col span='18' style='color:#218eee'>科目二学习中</i-col>
                            </i-row>
                            <i-row>
                                <i-col span='6'>驾照等级:</i-col>
                                <i-col span='18'>C2</i-col>
                            </i-row>
                            <i-row>
                                <i-col span='6'>报名班级:</i-col>
                                <i-col span='18'>班级名称</i-col>
                            </i-row>
                            <i-row>
                                <i-col span='6'>学员电话:</i-col>
                                <i-col span='18'>123456789</i-col>
                            </i-row>
                        
                        </div>
                    </i-col>
                </i-row> 
             </div> 
        </i-panel>

        <div class="divarter"></div>
        <div class="plan-container">
            <i-cell-group>
                <i-cell title="学习项目一" label="18.2.23" >
                    <div slot='footer' class="finish">已完成</div>
                </i-cell>
                <i-cell title="学习项目一" label="18.2.23" >
                    <div slot='footer' class="finish">已完成</div>
                </i-cell>
                <i-cell title="学习项目一" label="18.2.23" >
                    <div slot='footer' class="finish">已完成</div>
                </i-cell>
                <i-cell title="学习项目二">
                    <!-- <switch slot="footer" checked /> -->
                    <i-switch :value="switch1" size="large" id='1' slot="footer"  @change="change">
                        <div slot="open" style="font-size:10px;">学习中</div>
                        <div slot="close"  style="font-size:10px;color:#ffffff;">未学习</div>
                    </i-switch>
                </i-cell>
                <i-cell title="学习项目二">
                    <i-switch :value="switch2" size="large" slot="footer" id='2' @change="change">
                        <div slot="open" style="font-size:10px;">学习中</div>
                        <div slot="close"  style="font-size:10px;color:#ffffff">未学习</div>
                    </i-switch>
                </i-cell>
            </i-cell-group>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            id:-1,
            switch1 : true,
            switch2 : false
        }
    },
    methods:{
        change(value){
            console.log(value)
            switch(value.target.id){
                case '1': this.switch1 = !this.switch1; break;
                case '2':this.switch2 = !this.switch2; break;
            }
        }
    },
    onLoad(option) {
        this.id = option.id
        console.log(option.id)
    }
}
</script>

<style lang="scss" scoped>
.detail-container{
    background-color: #f0f0f0;

    .info-container{
            
            // 学员头像
            .student-avartar{
                width: 100px;
                height: 100px;
                // border: 1px solid purple;
                margin:0 5px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .content{
                font-size: 14px;
                // border: 1px solid red;

                .name{
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 4px;
                }
                .joinDate{
                    .del{
                        display: inline;
                        text-decoration:line-through;
                    }

                }
            }
        }
        .divarter{
            height: 10px;
        }
        

        .plan-container{
            .finish{
                color:#74b943;
            }
        }
    }
</style>

